<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub风格任务看板</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --color-bg-primary: #ffffff;
            --color-bg-secondary: #f6f8fa;
            --color-bg-tertiary: #f3f4f6;
            --color-text-primary: #24292e;
            --color-text-secondary: #586069;
            --color-border-primary: #e1e4e8;
            --color-border-secondary: #d0d7de;
            --color-btn-bg: #f6f8fa;
            --color-btn-border: rgba(27, 31, 35, 0.15);
            --color-btn-text: #24292e;
            --color-card-bg: #ffffff;
            --color-accent: #0969da;
            --color-shadow: rgba(140, 149, 159, 0.15);
            --transition-speed: 0.3s;
        }

        [data-theme="dark"] {
            --color-bg-primary: #0d1117;
            --color-bg-secondary: #161b22;
            --color-bg-tertiary: #21262d;
            --color-text-primary: #f0f6fc;
            --color-text-secondary: #8b949e;
            --color-border-primary: #30363d;
            --color-border-secondary: #3e444c;
            --color-btn-bg: #21262d;
            --color-btn-border: rgba(240, 246, 252, 0.1);
            --color-btn-text: #c9d1d9;
            --color-card-bg: #161b22;
            --color-accent: #58a6ff;
            --color-shadow: rgba(0, 0, 0, 0.2);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transition: background-color var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background-color: var(--color-bg-primary);
            color: var(--color-text-primary);
            line-height: 1.5;
            padding: 16px;
            min-height: 100vh;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            margin-bottom: 24px;
            border-bottom: 1px solid var(--color-border-primary);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo i {
            font-size: 32px;
            color: var(--color-accent);
        }

        .logo h1 {
            font-size: 24px;
            font-weight: 600;
        }

        .theme-switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 28px;
        }

        .theme-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--color-bg-tertiary);
            border: 1px solid var(--color-border-primary);
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 4px;
            bottom: 3px;
            background-color: var(--color-text-primary);
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: var(--color-accent);
        }

        input:checked + .slider:before {
            transform: translateX(30px);
        }

        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            gap: 16px;
        }

        .search-box {
            display: flex;
            flex: 1;
            max-width: 400px;
        }

        .search-box input {
            flex: 1;
            padding: 8px 16px;
            border: 1px solid var(--color-border-primary);
            border-radius: 6px 0 0 6px;
            background-color: var(--color-bg-secondary);
            color: var(--color-text-primary);
        }

        .search-box button {
            padding: 8px 16px;
            background-color: var(--color-btn-bg);
            border: 1px solid var(--color-border-primary);
            border-left: none;
            border-radius: 0 6px 6px 0;
            color: var(--color-text-secondary);
            cursor: pointer;
        }

        .btn {
            padding: 8px 16px;
            background-color: var(--color-btn-bg);
            border: 1px solid var(--color-btn-border);
            border-radius: 6px;
            color: var(--color-btn-text);
            cursor: pointer;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background-color: var(--color-accent);
            color: white;
            border: 1px solid rgba(27, 31, 35, 0.15);
        }

        .btn:hover {
            background-color: var(--color-bg-tertiary);
        }

        .btn-primary:hover {
            background-color: #0881ff;
        }

        .board {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 16px;
        }

        .column {
            background-color: var(--color-bg-secondary);
            border: 1px solid var(--color-border-primary);
            border-radius: 6px;
            padding: 16px;
            display: flex;
            flex-direction: column;
        }

        .column-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--color-border-primary);
        }

        .column-title {
            font-weight: 600;
            font-size: 18px;
        }

        .task-count {
            background-color: var(--color-bg-tertiary);
            color: var(--color-text-secondary);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }

        .tasks {
            flex: 1;
            min-height: 100px;
        }

        .task {
            background-color: var(--color-card-bg);
            border: 1px solid var(--color-border-primary);
            border-radius: 6px;
            padding: 12px;
            margin-bottom: 12px;
            cursor: grab;
            box-shadow: 0 1px 3px var(--color-shadow);
        }

        .task:hover {
            border-color: var(--color-border-secondary);
        }

        .task-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
        }

        .task-title {
            font-weight: 600;
            margin-right: 8px;
        }

        .task-actions {
            display: flex;
            gap: 8px;
        }

        .task-action {
            color: var(--color-text-secondary);
            cursor: pointer;
            font-size: 14px;
        }

        .task-action:hover {
            color: var(--color-accent);
        }

        .task-description {
            color: var(--color-text-secondary);
            font-size: 14px;
            margin-bottom: 12px;
        }

        .task-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: var(--color-text-secondary);
        }

        .task-tags {
            display: flex;
            gap: 4px;
        }

        .tag {
            padding: 2px 8px;
            border-radius: 12px;
            background-color: var(--color-bg-tertiary);
        }

        .task.dragging {
            opacity: 0.5;
            border: 2px dashed var(--color-border-primary);
        }

        .add-task-form {
            margin-top: 16px;
            display: none;
        }

        .add-task-form.active {
            display: block;
        }

        .form-group {
            margin-bottom: 12px;
        }

        .form-group label {
            display: block;
            margin-bottom: 4px;
            font-size: 14px;
            color: var(--color-text-secondary);
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--color-border-primary);
            border-radius: 6px;
            background-color: var(--color-bg-secondary);
            color: var(--color-text-primary);
        }

        .form-group textarea {
            min-height: 80px;
            resize: vertical;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }

        .empty-state {
            text-align: center;
            padding: 24px;
            color: var(--color-text-secondary);
        }

        .empty-state i {
            font-size: 32px;
            margin-bottom: 8px;
            opacity: 0.5;
        }

        @media (max-width: 768px) {
            .board {
                grid-template-columns: 1fr;
            }
            
            .controls {
                flex-direction: column;
                align-items: stretch;
            }
            
            .search-box {
                max-width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fab fa-github"></i>
                <h1>GitHub任务看板</h1>
            </div>
            <div class="theme-toggle">
                <label class="theme-switch">
                    <input type="checkbox" id="theme-toggle">
                    <span class="slider"></span>
                </label>
            </div>
        </header>

        <div class="controls">
            <div class="search-box">
                <input type="text" placeholder="搜索任务...">
                <button><i class="fas fa-search"></i></button>
            </div>
            <button class="btn btn-primary" id="add-task-btn">
                <i class="fas fa-plus"></i> 新建任务
            </button>
        </div>

        <div class="board">
            <div class="column">
                <div class="column-header">
                    <div class="column-title">待处理</div>
                    <div class="task-count">3</div>
                </div>
                <div class="tasks" id="todo-column">
                    <div class="task" draggable="true">
                        <div class="task-header">
                            <div class="task-title">实现拖放功能</div>
                            <div class="task-actions">
                                <i class="fas fa-pencil-alt task-action"></i>
                                <i class="fas fa-trash task-action"></i>
                            </div>
                        </div>
                        <div class="task-description">为任务卡片添加拖放功能，支持在不同列之间移动</div>
                        <div class="task-footer">
                            <div class="task-tags">
                                <span class="tag">前端</span>
                                <span class="tag">功能</span>
                            </div>
                            <div class="task-date">2023-10-15</div>
                        </div>
                    </div>
                    <div class="task" draggable="true">
                        <div class="task-header">
                            <div class="task-title">优化响应式设计</div>
                            <div class="task-actions">
                                <i class="fas fa-pencil-alt task-action"></i>
                                <i class="fas fa-trash task-action"></i>
                            </div>
                        </div>
                        <div class="task-description">确保看板在移动设备上表现良好</div>
                        <div class="task-footer">
                            <div class="task-tags">
                                <span class="tag">CSS</span>
                            </div>
                            <div class="task-date">2023-10-18</div>
                        </div>
                    </div>
                </div>
                <div class="add-task-form">
                    <div class="form-group">
                        <label for="task-title">标题</label>
                        <input type="text" id="task-title" placeholder="输入任务标题">
                    </div>
                    <div class="form-group">
                        <label for="task-description">描述</label>
                        <textarea id="task-description" placeholder="输入任务描述"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="task-tags">标签（逗号分隔）</label>
                        <input type="text" id="task-tags" placeholder="例如：前端, 优化, 功能">
                    </div>
                    <div class="form-actions">
                        <button class="btn" id="cancel-task">取消</button>
                        <button class="btn btn-primary" id="save-task">保存</button>
                    </div>
                </div>
                <button class="btn" id="show-add-form">
                    <i class="fas fa-plus"></i> 添加任务
                </button>
            </div>

            <div class="column">
                <div class="column-header">
                    <div class="column-title">进行中</div>
                    <div class="task-count">2</div>
                </div>
                <div class="tasks" id="inprogress-column">
                    <div class="task" draggable="true">
                        <div class="task-header">
                            <div class="task-title">实现主题切换功能</div>
                            <div class="task-actions">
                                <i class="fas fa-pencil-alt task-action"></i>
                                <i class="fas fa-trash task-action"></i>
                            </div>
                        </div>
                        <div class="task-description">添加深色和浅色主题切换，模仿GitHub风格</div>
                        <div class="task-footer">
                            <div class="task-tags">
                                <span class="tag">JavaScript</span>
                                <span class="tag">CSS</span>
                            </div>
                            <div class="task-date">2023-10-20</div>
                        </div>
                    </div>
                </div>
                <div class="add-task-form">
                    <!-- 表单结构同上 -->
                </div>
                <button class="btn" id="show-add-form">
                    <i class="fas fa-plus"></i> 添加任务
                </button>
            </div>

            <div class="column">
                <div class="column-header">
                    <div class="column-title">已完成</div>
                    <div class="task-count">1</div>
                </div>
                <div class="tasks" id="done-column">
                    <div class="task" draggable="true">
                        <div class="task-header">
                            <div class="task-title">设计任务卡片UI</div>
                            <div class="task-actions">
                                <i class="fas fa-pencil-alt task-action"></i>
                                <i class="fas fa-trash task-action"></i>
                            </div>
                        </div>
                        <div class="task-description">设计符合GitHub风格的任务卡片UI</div>
                        <div class="task-footer">
                            <div class="task-tags">
                                <span class="tag">设计</span>
                                <span class="tag">UI</span>
                            </div>
                            <div class="task-date">2023-10-10</div>
                        </div>
                    </div>
                </div>
                <div class="add-task-form">
                    <!-- 表单结构同上 -->
                </div>
                <button class="btn" id="show-add-form">
                    <i class="fas fa-plus"></i> 添加任务
                </button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 主题切换功能
            const themeToggle = document.getElementById('theme-toggle');
            const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
            
            // 检查本地存储或系统偏好
            const currentTheme = localStorage.getItem('theme');
            if (currentTheme === 'dark' || (!currentTheme && prefersDarkScheme.matches)) {
                document.documentElement.setAttribute('data-theme', 'dark');
                themeToggle.checked = true;
            } else {
                document.documentElement.setAttribute('data-theme', 'light');
            }
            
            themeToggle.addEventListener('change', function() {
                if (this.checked) {
                    document.documentElement.setAttribute('data-theme', 'dark');
                    localStorage.setItem('theme', 'dark');
                } else {
                    document.documentElement.setAttribute('data-theme', 'light');
                    localStorage.setItem('theme', 'light');
                }
            });
            
            // 拖放功能
            const tasks = document.querySelectorAll('.task');
            const columns = document.querySelectorAll('.tasks');
            
            let draggedTask = null;
            
            tasks.forEach(task => {
                task.addEventListener('dragstart', function() {
                    draggedTask = this;
                    setTimeout(() => {
                        this.classList.add('dragging');
                    }, 0);
                });
                
                task.addEventListener('dragend', function() {
                    this.classList.remove('dragging');
                    draggedTask = null;
                });
            });
            
            columns.forEach(column => {
                column.addEventListener('dragover', function(e) {
                    e.preventDefault();
                });
                
                column.addEventListener('dragenter', function(e) {
                    e.preventDefault();
                    this.style.backgroundColor = 'var(--color-bg-tertiary)';
                });
                
                column.addEventListener('dragleave', function() {
                    this.style.backgroundColor = 'transparent';
                });
                
                column.addEventListener('drop', function(e) {
                    e.preventDefault();
                    this.style.backgroundColor = 'transparent';
                    if (draggedTask) {
                        this.appendChild(draggedTask);
                        updateTaskCounts();
                    }
                });
            });
            
            // 添加任务表单显示/隐藏
            const addTaskButtons = document.querySelectorAll('#show-add-form');
            const addTaskForms = document.querySelectorAll('.add-task-form');
            const cancelTaskButtons = document.querySelectorAll('#cancel-task');
            
            addTaskButtons.forEach((button, index) => {
                button.addEventListener('click', function() {
                    addTaskForms[index].classList.add('active');
                    this.style.display = 'none';
                });
            });
            
            cancelTaskButtons.forEach((button, index) => {
                button.addEventListener('click', function() {
                    addTaskForms[index].classList.remove('active');
                    addTaskButtons[index].style.display = 'block';
                });
            });
            
            // 保存任务
            const saveTaskButtons = document.querySelectorAll('#save-task');
            
            saveTaskButtons.forEach((button, index) => {
                button.addEventListener('click', function() {
                    const titleInput = addTaskForms[index].querySelector('#task-title');
                    const descInput = addTaskForms[index].querySelector('#task-description');
                    const tagsInput = addTaskForms[index].querySelector('#task-tags');
                    
                    if (titleInput.value.trim() === '') {
                        alert('请输入任务标题');
                        return;
                    }
                    
                    const newTask = document.createElement('div');
                    newTask.className = 'task';
                    newTask.draggable = true;
                    
                    const tags = tagsInput.value.split(',').map(tag => tag.trim()).filter(tag => tag !== '');
                    let tagsHTML = '';
                    tags.forEach(tag => {
                        tagsHTML += `<span class="tag">${tag}</span>`;
                    });
                    
                    newTask.innerHTML = `
                        <div class="task-header">
                            <div class="task-title">${titleInput.value}</div>
                            <div class="task-actions">
                                <i class="fas fa-pencil-alt task-action"></i>
                                <i class="fas fa-trash task-action"></i>
                            </div>
                        </div>
                        <div class="task-description">${descInput.value}</div>
                        <div class="task-footer">
                            <div class="task-tags">${tagsHTML}</div>
                            <div class="task-date">${new Date().toISOString().split('T')[0]}</div>
                        </div>
                    `;
                    
                    // 添加拖放事件
                    newTask.addEventListener('dragstart', function() {
                        draggedTask = this;
                        setTimeout(() => {
                            this.classList.add('dragging');
                        }, 0);
                    });
                    
                    newTask.addEventListener('dragend', function() {
                        this.classList.remove('dragging');
                        draggedTask = null;
                    });
                    
                    // 添加编辑和删除事件
                    addTaskEvents(newTask);
                    
                    columns[index].appendChild(newTask);
                    
                    // 重置表单
                    titleInput.value = '';
                    descInput.value = '';
                    tagsInput.value = '';
                    
                    addTaskForms[index].classList.remove('active');
                    addTaskButtons[index].style.display = 'block';
                    
                    updateTaskCounts();
                });
            });
            
            // 任务计数更新
            function updateTaskCounts() {
                const columnHeaders = document.querySelectorAll('.column-header');
                columns.forEach((column, index) => {
                    const taskCount = column.querySelectorAll('.task').length;
                    columnHeaders[index].querySelector('.task-count').textContent = taskCount;
                });
            }
            
            // 添加任务事件（编辑和删除）
            function addTaskEvents(task) {
                const editBtn = task.querySelector('.fa-pencil-alt');
                const deleteBtn = task.querySelector('.fa-trash');
                
                editBtn.addEventListener('click', function() {
                    const title = task.querySelector('.task-title').textContent;
                    const description = task.querySelector('.task-description').textContent;
                    
                    const newTitle = prompt('编辑任务标题:', title);
                    if (newTitle !== null) {
                        task.querySelector('.task-title').textContent = newTitle;
                    }
                    
                    const newDescription = prompt('编辑任务描述:', description);
                    if (newDescription !== null) {
                        task.querySelector('.task-description').textContent = newDescription;
                    }
                });
                
                deleteBtn.addEventListener('click', function() {
                    if (confirm('确定要删除这个任务吗？')) {
                        task.remove();
                        updateTaskCounts();
                    }
                });
            }
            
            // 为现有任务添加事件
            tasks.forEach(task => {
                addTaskEvents(task);
            });
            
            // 搜索功能
            const searchInput = document.querySelector('.search-box input');
            const searchButton = document.querySelector('.search-box button');
            
            searchButton.addEventListener('click', performSearch);
            searchInput.addEventListener('keyup', function(e) {
                if (e.key === 'Enter') {
                    performSearch();
                }
            });
            
            function performSearch() {
                const searchTerm = searchInput.value.toLowerCase();
                
                tasks.forEach(task => {
                    const title = task.querySelector('.task-title').textContent.toLowerCase();
                    const description = task.querySelector('.task-description').textContent.toLowerCase();
                    const tags = task.querySelectorAll('.tag');
                    
                    let tagText = '';
                    tags.forEach(tag => {
                        tagText += tag.textContent.toLowerCase() + ' ';
                    });
                    
                    if (title.includes(searchTerm) || description.includes(searchTerm) || tagText.includes(searchTerm)) {
                        task.style.display = 'block';
                    } else {
                        task.style.display = 'none';
                    }
                });
            }
        });
    </script>
</body>
</html>